<template>
    <div class="box">
        <div class="box-head">
            <el-input size="large" :placeholder="store.appFront.search"></el-input>
        </div>
        <el-scrollbar height="calc(100% - 50px)" class="box-body">
            <el-menu :default-active="$route.path" :router="true" class="menu">

                <template v-for="(item, index) in bodyData" :key="index">

                    <el-menu-item v-if="!item.directory" :index="item.path">

                        <el-icon>
                            <Setting />
                        </el-icon>
                        <span>{{ item.name }}</span>
                    </el-menu-item>

                    <el-sub-menu v-if="item.directory" :index="index">
                        <template #title>
                            <el-icon>
                                <Setting />
                            </el-icon>
                            <span>{{ item.name }}</span>
                        </template>

                        <el-menu-group>
                            <el-menu-item v-for="(childrenItem, childrenIndex) in item.children" :key="childrenIndex"
                                @click="selectBreadcrumb(childrenItem)" :index="childrenItem.path">
                                <div>{{ childrenItem.name }}</div>
                            </el-menu-item>
                        </el-menu-group>
                    </el-sub-menu>

                </template>


            </el-menu>
        </el-scrollbar>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, defineExpose, toRefs } from 'vue';
import { useStore } from '@/stores/counter';
import $kt from '@/vueKantboot';

let store = useStore();

let bodyData = ref([
    {
        "children": [
            {
                "children": [],
                "code": "userManage",
                "directory": false,
                "id": 2,
                "menuCodeOfDirectory": "systemManage",
                "name": "测试2",
                "path": "/manage/system/user"
            },
            {
                "children": [],
                "code": "settingManage",
                "directory": false,
                "id": 3,
                "menuCodeOfDirectory": "systemManage",
                "name": "测试1",
                "path": "/manage/system/setting"
            }
        ],
        "code": "systemManage",
        "directory": true,
        "path": "/manage/system",
        "id": 1,
        "name": "测试"
    }
]);



let getMenus = async () => {
    $kt.request.request({
        url: '/admin/menu/getMenus',
        method: 'post',
    }).then((res) => {
        bodyData.value = res.data.data;
    });
}


getMenus();

store.$onAction((json) => {
    if (json.name == "setLanguageCode") {
        getMenus();
    }
});


let selectBreadcrumb = (item: any) => {
    store.selectBreadcrumb(item);
}

store.$onAction((json) => {
    if (json.name == "setLanguageCode") {
        getMenus();
    }
});


</script>

<style lang="scss" scoped>
.box {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    float: left;
    border-right: 2px solid #ebeef5;
    box-sizing: border-box;
    padding: 5px;

    .box-head {
        padding: 10px;
        height: 70px;
        box-sizing: border-box;

    }

    .box-body {
        position: absolute;
        height: calc(100% - 80px);
        width: calc(100% - 10px);
    }

    .menu {
        width: 100%;
        height: calc(100% - 130px);
        border: none;
    }
}
</style>